<!-- <template>
  <view class="container">
    <header class="bg-white shadow-sm">
      <view class="container mx-auto px-4 py-4 flex justify-between items-center">
        <view class="flex items-center space-x-2">
          <button @click="goBack">
            <text class="fa fa-arrow-left text-gray-600"></text>
          </button>
          <text class="text-xl font-bold text-gray-800">选择时间段</text>
        </view>
      </view>
    </header>

    <main class="container mx-auto px-4 py-6">
      <view class="mb-6">
        <text class="text-xl font-bold text-gray-800 mb-1">{{ stadiumName }}</text>
        <text class="text-gray-600 text-sm">选择您想要预订的时间段</text>
      </view>

      <view class="mb-6">
        <text class="block text-lg font-medium text-gray-700 mb-2">选择日期</text>
        <view class="flex space-x-2 overflow-x-auto pb-2">
          <view v-for="date in dates" :key="date.id" class="date-item" :class="{'bg-primary text-white': selectedDate === date.id}" @click="selectDate(date.id)">
            <text class="block text-sm">{{ date.weekday }}</text>
            <text class="block text-lg font-medium">{{ date.day }}</text>
          </view>
        </view>
      </view>

      <view>
        <text class="block text-lg font-medium text-gray-700 mb-2">选择时间段</text>
        <view class="grid grid-cols-3 gap-2">
          <view v-for="timeSlot in timeSlots" :key="timeSlot.id" class="time-slot" :class="{'bg-primary text-white': selectedTimeSlot === timeSlot.id, 'opacity-50 cursor-not-allowed': !timeSlot.available}" @click="timeSlot.available ? selectTimeSlot(timeSlot.id) : null">
            <text>{{ timeSlot.time }}</text>
            <text class="text-xs block mt-1">{{ timeSlot.price }}元/小时</text>
          </view>
        </view>
      </view>

      <button class="backgroundTime" :disabled="!selectedTimeSlot" @click="confirmBooking">
        确认预订
      </button>
    </main>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stadiumName: '',
      dates: [],
      timeSlots: [],
      selectedDate: null,
      selectedTimeSlot: null
    }
  },
  onLoad(options) {
    this.stadiumName = options.name || '未知体育馆';
    this.initDates();
    this.initTimeSlots();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    initDates() {
      // 初始化未来7天的日期数据
      const dates = [];
      const today = new Date();
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      
      for (let i = 0; i < 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const weekday = weekdays[date.getDay()];
        
        dates.push({
          id: i,
          month: month,
          day: `${month}月${day}日`,
          weekday: weekday,
          date: date
        });
      }
      
      this.dates = dates;
      this.selectedDate = 0; // 默认选择今天
    },
    initTimeSlots() {
      // 初始化时间段数据
      const timeSlots = [];
      const startHour = 8;
      const endHour = 22;
      
      for (let i = startHour; i < endHour; i++) {
        // 随机生成是否可预订
        const available = Math.random() > 0.3;
        
        timeSlots.push({
          id: i,
          time: `${i}:00-${i+1}:00`,
          price: 60 + Math.floor(Math.random() * 40), // 60-100元/小时
          available: available
        });
      }
      
      this.timeSlots = timeSlots;
    },
    selectDate(dateId) {
      this.selectedDate = dateId;
    },
    selectTimeSlot(timeSlotId) {
      this.selectedTimeSlot = timeSlotId;
    },
    confirmBooking() {
      if (!this.selectedTimeSlot) {
        uni.showToast({
          title: '请选择时间段',
          icon: 'none'
        });
        return;
      }
      
      const selectedDate = this.dates[this.selectedDate];
      const selectedTime = this.timeSlots[this.selectedTimeSlot];
      
      uni.showModal({
        title: '预订确认',
        content: `您确定要预订${this.stadiumName}的${selectedDate.day}（${selectedDate.weekday}）${selectedTime.time}的场地吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟预订成功
            setTimeout(() => {
              uni.showToast({
                title: '预订成功！',
                icon: 'success'
              });
              
              // 返回首页
              setTimeout(() => {
                uni.navigateBack({
                  delta: 2 // 返回两级页面
                });
              }, 1500);
            }, 500);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
@use 'uni.scss';
.container{
	@apply bg-gray-50 min-h-screen;
}
.container {
  min-height: 100vh;
  background-color: #f9fafb;
}

.date-item {
  min-width: 60px;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover:not(.bg-primary) {
    background-color: #edf2f7;
  }
}

.time-slot {
  padding: 12px 8px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover:not(.opacity-50):not(.bg-primary) {
    background-color: #edf2f7;
  }
}

.bg-primary {
  background-color: #2563eb;
  color: white;
}

.backgroundTime{
  background-color: rgba(37, 99, 235, 0.9);
}


</style>    -->